<template>
    <div class="group">
        <h3>4.下面是一个购物车的静态 HTML 模板和样式部分。你可以在此基础上实现购物车的功能，包括 ref、reactive、计算属性、样式绑定等 Vue 3 知识点</h3>
        <div class="shopping-cart">
            <h1>Shopping Cart</h1>

            <!-- 商品列表 -->
            <div class="product-list">
                <!-- <div class="product">
                        <img :src="item.shopImgUrl" alt="Product Image">
                        <div class="product-details">
                            <h2>{{ item.shopName }}</h2>
                            <p>$ {{ item.price }}.00</p>
                            <div class="quantity">
                                <button :disabled="item.count <= 1" @click="item.count--">-</button>
                                <input type="text" v-model="item.count">
                                <button :disabled="item.count >= item.stock" @click="item.count++">+</button>
                            </div>
                        </div>
                    </div> -->

                <!-- <div class="product">
                        <img src="https://via.placeholder.com/100" alt="Product Image">
                        <div class="product-details">
                            <h2>Product 2</h2>
                            <p>$50.00</p>
                            <div class="quantity">
                                <button>-</button>
                                <input type="text" value="1">
                                <button>+</button>
                            </div>
                        </div>
                    </div> -->

                <!-- :item变量名="item变量值" 定义item变量，把父组件的item传给子组件  -->
                <!-- <ShopItem v-for="item in myshops" :key="item.id" :item="item"></ShopItem> -->

                <template v-for="item in myshops" :key="item.id">
                    <slot :a="item">
                        <ShopItem :item="item"></ShopItem>
                    </slot>
                </template>
            </div>

            <!-- 购物车总结 -->
            <div class="cart-summary">
                <h3>Cart Summary</h3>
                <p>Total Items: <span>{{ shops.length }}</span></p>
                <p>Total Price: <span>$ {{ getTotalPrice }}.00</span></p>
                <button class="checkout-btn">Checkout</button>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { computed, ref } from 'vue';
import ShopItem from './ShopItem.vue';
import { type IShopInfo } from '@/types/shop'

// 通过props 解构出来的shops变量，接收从父组件传过来的shopList
// shops是Props解构出来的变量，他是只读的，不可以直接修改，需要从新定义变量接受他的值
const { shops } = defineProps<{
    shops: IShopInfo[]
}>()

// 组件自己的ref对象，可以修改
const myshops = ref<IShopInfo[]>(shops)

// getTotalPrice 计算属性，它涉及不到修改值，所以可以直接使用 props 解构出来的值。
const getTotalPrice = computed(() => {
    return shops.reduce((pre, cur) => { return pre + cur.count * cur.price }, 0)
})

/**
 * 添加商品
 * @param addShopItemInfo 传入一个参数，作为添加的商品信息
 */
const getAddShop = (addShopItemInfo: IShopInfo) => {
    // return myshops.value.push({
    //     id: '4',
    //     shopName: 'Prodect 4',
    //     count: 2,
    //     price: 200,
    //     stock: 7,
    //     shopImgUrl: '/src/assets/images/8.jpg'
    // })
    myshops.value.push(addShopItemInfo)
}

/**
 * 修改某个商品指定属性的值（ts约束）
 * @param index 商品的索引
 * @param filed 商品的属性名
 * @param val 商品的属性值
 */
const getEditShop = <K extends keyof IShopInfo>(index: number, filed: K, val: IShopInfo[K]) => {
    myshops.value[index][filed] = val
}

// 抛出暴露函数到组件外，任意的组件都能通过useTemplateRef和ref组合接收，实现组件之间的数据共享
defineExpose({
    getAddShop,
    getEditShop
})

</script>

<style lang="scss" scoped>
.group {
    border: 2px solid skyblue;
    padding: 10px;
    margin: 10px;
}

// 4.
/* 主体购物车样式 */
.shopping-cart {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* 购物车总结 */
.cart-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ccc;
    text-align: right;
}

.cart-summary h3 {
    margin-bottom: 10px;
}

.cart-summary p {
    font-size: 1.2em;
    margin: 5px 0;
}

.checkout-btn {
    padding: 10px 20px;
    background-color: #2196f3;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
}

.checkout-btn:hover {
    background-color: #0b7dda;
}

button.activeClass {
    background-color: #ddd;
}
</style>